import React from 'react';
import { useLocation, useParams,useNavigate } from 'react-router-dom';
import { Card, Descriptions, Divider, Button } from 'antd';

const WorkerDetailPage = () => {
  const { id } = useParams();
  const { state } = useLocation();
  const navigate = useNavigate();
  const worker = state?.worker;

  if (!worker) {
    return <div>没有找到该工作者的信息</div>;
  }

  const handleContactClick = () => {
    navigate(`/chat/${worker.id}`, { state: { worker } });
  };

  return (
    <Card 
      key={id} 
      title={worker.name} 
      style={{ margin: '0 auto', marginTop: 50}}
      // cover={<img alt="worker photo" src={worker.photoUrl} />} // 工作者照片
    >
      <Descriptions title="工作者详情" bordered>
        <Descriptions.Item label="年龄">{worker.age}</Descriptions.Item>
        <Descriptions.Item label="从业经验">{worker.experience}</Descriptions.Item>
        <Descriptions.Item label="好评率">{worker.rating}</Descriptions.Item>
        <Descriptions.Item label="地区">{worker.location}</Descriptions.Item>
        <Descriptions.Item label="技能">{worker.skills.join(', ')}</Descriptions.Item>
        <Descriptions.Item label="联系电话">{worker.phone}</Descriptions.Item>
        <Descriptions.Item label="邮箱">{worker.email}</Descriptions.Item>
        <Descriptions.Item label="描述">{worker.description}</Descriptions.Item>
      </Descriptions>

      <Divider />

      <div style={{ textAlign: 'center' }}>
        <Button type="primary" style={{ marginRight: 16 }} onClick={handleContactClick}>
          联系工作者
        </Button>
      </div>
    </Card>
  );
};

export default WorkerDetailPage;
